<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>雪花</title>
    <style>
        body{
            background-color: rgb(0, 195, 255);
        }
    </style>
</head>

<body>
    <div class="xh"></div>

    <script src="./jquery-3.3.1.min.js"></script>
    <script>
        let flake = $('<div></div>').css({ position: 'absolute', color: '#fff', top: 0 }).html("❄");
        let flakelove2 = $('<div></div>').css({ position: 'absolute', color: 'rgb(0, 255, 183)', top: 0 }).html("✨十九拜拜 二十更乖");
        let flakelove1 = $('<div></div>').css({ position: 'absolute', color: 'rgb(0,195,255)', top: 0 }).html("按时长大！叮！✨");
        let flakelove = $('<div></div>').css({ position: 'absolute', color: 'hotpink', top: 0 }).html(" ʜᴀᴘᴘʏ ʙɪʀᴛʜᴅᴀʏ ᴛᴏ ᴍᴇ ◟̆◞̆  ");
        let flakeren = $('<div></div>').css({ position: 'absolute', top: 0 }).html("🎂");
        let flakeren1 = $('<div></div>').css({ position: 'absolute', top: 0 }).html("⛄");

        const arr=[flake,flakelove,flakeren,flakelove1,flakelove2,flakeren1];
        let dw = $(window).width();
        
        let dh = $(window).height();
        console.log(dw,dh)
        setInterval(function () {
            let change=Math.floor(Math.random()*10);
            if(change<=4){
                change=0;
            }else if(change==8){
                change=1;
            }else if(change==7){
                change=3;
            }else if(change==6){
                change=4;
            }else if(change==5){
                change==5;
            }
            else{
                change=2;
            }

            let startLeft = dw * Math.random();
            let startOpa = 0.3 + 0.7 * Math.random();
            let startSize = 5 + 50 * Math.random();

            let endLeft = dw * Math.random();
            let speed=3000+4000*Math.random();
            arr[change].clone().appendTo('body').css({
                left: startLeft,
                opacity: startOpa,
                fontSize: startSize
            }).animate(
                {
                    left: endLeft,
                    top: dh,
                    opacity: 0.5
                }, speed, function () {
                    $(this).remove()
                })
        }, 100)
    </script>
</body>

</html>